<template>
  <div>
    <div class="page-header-button">
      <el-button type="primary" @click="showAdd">
        <el-icon><CirclePlus /></el-icon>
        &nbsp;添加
      </el-button>
    </div>
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="凭证名称" :show-overflow-tooltip="true" />
      <el-table-column prop="username" label="用户名" :show-overflow-tooltip="true" />
      <el-table-column label="操作" width="50">
        <template #default="scope">
          <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <more-filled />
                </el-icon>
              </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="del(scope.row)"><el-icon><Delete /></el-icon> 删除</el-dropdown-item>
                <el-dropdown-item @click="showModify(scope.row)"><el-icon><EditPen /></el-icon> 修改</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-block" >
      <el-pagination small layout="prev, pager, next" :page-size="page.size" :total="page.total" :current-change="getData" />
    </div>

    <proof-form ref="refProofManage" @refresh="getData(true)" />
  </div>
</template>

<script>
import {CirclePlus, Delete, EditPen, MoreFilled} from "@element-plus/icons-vue"
import ProofForm from "@/components/proof/ProofForm.vue"
import StoreProof from "@/store/StoreProof"

export default {
  name: 'ProofManage',
  components: {
    CirclePlus, Delete, MoreFilled, EditPen,
    ProofForm
  },
  data () {
    return {
      tableData: [],
      page: {
        size: 20,
        page: 1,
        total: 1
      }
    }
  },
  methods: {
    /**
     * 获取数据.
     * @param resetPage {boolean}
     */
    getData(resetPage) {
      if (resetPage) {
        this.page.page = 1
      }

      StoreProof.getPagedData(this.page.page, this.page.size, null, (data) => {
        this.tableData = data.data
        this.page.total = data.total
      })
    },
    /**
     * 删除凭证.
     * @param row {Object}
     */
    del(row) {
      this.$confirm('此操作将永久删除该凭证, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        StoreProof.delete({id: row.id})
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getData()
      }).catch(() => {})
    },
    /**
     * 显示修改窗口.
     * @param row
     */
    showModify(row) {
      this.$refs.refProofManage.show(true, Object.assign({}, row))
    },
    /**
     * 显示新增窗口.
     */
    showAdd() {
      this.$refs.refProofManage.show(false, {})
    }
  },
  mounted() {
    StoreProof.init(this)
    this.getData(true)
  }
}
</script>

<style scoped>

</style>